<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Binding Cell Phone</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_fx9en0nm4fw.css">
    <link rel="stylesheet" href="../../css/shouye.css">
    <style>
        body,html {
            width: 100%;
            /* height: 3000px; */
        }
        #wrap{
            width:100%;
        }
        .m-right{
            width:100%;
            height:100%;
            /* border-left: 1px solid #e7e7e7; */
            position: relative;
            /* margin-top:-20px; */
        }
        .m-right h3{
            font:16px/67px "微软雅黑";
            font-weight: 100;
            text-indent: 1em;
            margin:0px;
            
            border-bottom: 1px solid #e7e7e7;
            position: relative;
        }
        .m-right h3 span:nth-child(2){
            color:#f08200;
            position: absolute;
            right:2%;
            top:0px;
        }
        .m-right h3 span:nth-child(1){
            position: absolute;
            right:5.8%;
            top:0px;
        }
        .m-right h5{
            width:96.22%;
            height:46px;
            background-color: #f2f2f2;
            font:16px/46px "微软雅黑";
            margin-left:1.63%;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
        }
        /* .m-right h5 span:nth-child(1){
            margin-left:1.63%;
        }
        .m-right h5 span:nth-child(2){
            margin-left:18.5%;
        }
        .m-right h5 span:nth-child(3){
            margin-left:23.5%;
        } */
        .m-right h5 span em{
            color:#f08200;
        }
        .m-right ul li{
            width:96.22%;
            border:1px solid #e7e7e7;
            margin-left: 1.29%;
            overflow: hidden;
            height:170px;
            margin-top:10px;
        }
        .p-left{
            width:80%;
            height:110px;
            text-align: center;
            display: flex;
            justify-content: space-around;
        }
        .p-left img{
            height:80px;
            margin-left:6%;
        }
        .p-left span, .p-left i{
            margin-top:30px;
        }
        /* 
        .p-left i:nth-child(3){
            margin-left: 13%;
            margin-right: 11%;
        }
        .p-left i:nth-child(4){
            margin-left: 8%;
            margin-right: 8%;
        } */
        .p-left,.p-right{
            float: left;
        }
        .p-left span:last-child{
            margin-left:9%;
        }
        .p-right{
            font: 16px/30px "微软雅黑";
            margin-left:5%;
        }
        .p-right h4{
            color:#6ba063;
        }
        .p-right input{
            height:30px;
            background-color: #f08200;
            color:#fff;
            text-align: center;
            border:0px;
            border-radius: 7px;
        }
        .bottom{
            margin-left:15%;
            margin-top:30px;
        }
        .bottom span{
            width: 5%;
            display: inline-block;
            height:30px;
            background: #fff;
            text-align: center;
            line-height: 30px;
            color:#000;
            margin-left:2%;
        }
        .bottom span:nth-child(1){
            background: #dddddd;
            color:#fff;
        }
        .bottom span:nth-child(2),.bottom span:nth-child(8){
            background: #498e3d;
            color:#fff;
        }
        .bottom input{
            border:0px;
            background:#f08200;
            color:#fff;
            width: 5%;
            height:30px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="m-right">
            <h3>
                积分订单
                <span>当前积分：</span>
                <span>240</span>
            </h3> 
            <ul>
                <li>
                    <h5>
                        <span>订单号：150319690000</span>
                        <span>下单日期：2015.04.09 18：03：06</span>
                        <span>订单状态： <em>已完成</em></span>
                       
                    </h5>
                    <p>
                        <div class="p-left">
                            <img src="../../img/img-JL/HT.png" alt="">
                            <span>云南省黄桃6个装</span>
                            <i>6个装</i>
                            <i>x1</i>
                            <span>积分：58</span>
                        </div>
                        <div class="p-right">
                            <h4>查看详情</h4>
                            <form>
                                <input type="button" value="删除订单">
                            </form>
                        </div>
                    </p>
                </li>
                <li>
                    <h5>
                        <span>订单号：150319690000</span>
                        <span>下单日期：2015.04.09 18：03：06</span>
                        <span>订单状态：<em>已完成</em></span>
                        
                    </h5>
                    <p>
                        <div class="p-left">
                            <img src="../../img/img-JL/HT.png" alt="">
                            <span>云南省黄桃6个装</span>
                            <i>6个装</i>
                            <i>x1</i>
                            <span>积分：58</span>
                        </div>
                        <div class="p-right">
                            <h4>查看详情</h4>
                            <form>
                                <input type="button" value="删除订单">
                            </form>
                        </div>
                    </p>
                </li>
                <li>
                    <h5>
                        <span>订单号：150319690000</span>
                        <span>下单日期：2015.04.09 18：03：06</span>
                        <span>订单状态：<em>已完成</em></span>
                        
                    </h5>
                    <p>
                        <div class="p-left">
                            <img src="../../img/img-JL/HT.png" alt="">
                            <span>云南省黄桃6个装</span>
                            <i>6个装</i>
                            <i>x1</i>
                            <span>积分：58</span>
                        </div>
                        <div class="p-right">
                            <h4>查看详情</h4>
                            <form>
                                <input type="button" value="删除订单">
                            </form>
                        </div>
                    </p>
                </li>
                <li>
                    <h5>
                        <span>订单号：150319690000</span>
                        <span>下单日期：2015.04.09 18：03：06</span>
                        <span>订单状态：  <em>已完成</em></span>
                      
                    </h5>
                    <p>
                        <div class="p-left">
                            <img src="../../img/img-JL/HT.png" alt="">
                            <span>云南省黄桃6个装</span>
                            <i>6个装</i>
                            <i>x1</i>
                            <span>积分：58</span>
                        </div>
                        <div class="p-right">
                            <h4>查看详情</h4>
                            <form>
                                <input type="button" value="删除订单">
                            </form>
                        </div>
                    </p>
                </li>
                <li>
                    <h5>
                        <span>订单号：150319690000</span>
                        <span>下单日期：2015.04.09 18：03：06</span>
                        <span>订单状态： <em>已完成</em></span>
                       
                    </h5>
                    <p>
                        <div class="p-left">
                            <img src="../../img/img-JL/HT.png" alt="">
                            <span>云南省黄桃6个装</span>
                            <i>6个装</i>
                            <i>x1</i>
                            <span>积分：58</span>
                        </div>
                        <div class="p-right">
                            <h4>查看详情</h4>
                            <form>
                                <input type="button" value="删除订单">
                            </form>
                        </div>
                    </p>
                </li>
            </ul>
            <div class="bottom">
                <span> < </span>
                <span> 1 </span>
                <span> 2 </span>
                <span> 3 </span>
                <span> 4 </span>
                <span> ... </span>
                <span> 10 </span>
                <span> > </span>
                <span> /10 </span>
                <input type="button" value="跳转">
            </div>
        </div>
    </div>
</body>
</html>